<template>
  <div>
    <!-- 头部导航栏 -->
    <van-nav-bar :placeholder="true" :fixed="true">
      <template #left>
        <img class="logo" src="../../assets/images/toutiao_logo.png" alt="" />
      </template>
      <template #right>
        <van-icon name="search" color="white" size="0.48rem" />
      </template>
    </van-nav-bar>
    <van-tabs v-model="active" offset-top="1.2266667rem" sticky>
      <van-tab
        :title="obj.name"
        :name="obj.id"
        v-for="obj in channelList"
        :key="obj.id"
      >
        <ArticleList :channelId="active"></ArticleList>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getUserChanneAPI } from '@/api'
import ArticleList from '@/views/Home/Articlelist.vue'
export default {
  data () {
    return {
      active: 0,
      channelList: [],
      value: ''
    }
  },
  components: {
    ArticleList
  },
  async created () {
    const res = await getUserChanneAPI()
    this.channelList = res.data.data.channels
    console.log(this.channelList)
  }
}
</script>

<style scoped>
.logo {
  width: 100px;
  height: 30px;
}
</style>
